<template>
  <template v-if="questionList.length">
    <div class="mb-[20px] flex justify-center items-center w-full">
      <div class="flex-1">
        <h3 class="text-[24px] text-[600]">星际问卷</h3>
      </div>
      <div class="flex-1 justify-end flex">
        <a-input-search
            size="large"
            v-model:value="value"
            placeholder="输入关键字"
            style="width: 260px"
            @search="onSearch"
        />
      </div>
    </div>
    <div class="w-full">
      <template v-for="(item) in questionList" :key="item._id">
        <QuestionItem :itemData="item"></QuestionItem>
      </template>
      <div class="flex items-center justify-center pt-[30px]">
        <a-pagination @change="change" :total="total" :defaultPageSize="10" v-model:page-size="pageSize"
                      :show-total="total => `共 ${total} 条`"/>
      </div>
    </div>
  </template>
  <template v-else>
    <div class="w-full h-full flex items-center justify-center ">
      <a-spin/>
    </div>
  </template>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {getStarQuestionList} from "../../http/api.js";
import QuestionItem from '../../components/QuestionItem/index.vue'
import useStat from "../../store/stat.js";
import {storeToRefs} from "pinia";
const {questionList} = storeToRefs(useStat())
let value = ref('')
let total = ref(0)
let pageSize = ref(10)
const onSearch = () => {

}
const change = (current, pageSize) => {
  getData( current, pageSize)
}
const getData = async (current, pageSize) => {
  let result = await getStarQuestionList({isStar: true},current, pageSize)
  useStat().updateList(result.list)
  total.value = result.total
}
onMounted(() => {
  getData()
})
</script>

<style scoped>

</style>
